<template>
  <div class="widget-config-container">
    <el-form label-width="60px">
      <el-form-item label="左父格：">
        <el-radio v-model="formData.leftParentType" label="default" @change="setParentCell(null, true)">默认</el-radio>
        <el-radio v-model="formData.leftParentType" label="custom">自定义</el-radio>
        <el-select v-model="formData.leftParentCellName" placeholder="请选择" class="w-80" :disabled="formData.leftParentType==='default'" @change="leftParentNameSelect">
          <el-option v-for="item in parentCellNameOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="formData.leftParentRowNumber" placeholder="请选择" class="w-80" :disabled="formData.leftParentType==='default' || formData.leftParentCellName === 'root'" @change="leftParentNameSelect">
          <el-option v-for="item in parentRowNameOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上父格：">
        <el-radio v-model="formData.topParentType" label="default" @change="setParentCell(null, false)">默认</el-radio>
        <el-radio v-model="formData.topParentType" label="custom">自定义</el-radio>
        <el-select v-model="formData.topParentCellName" placeholder="请选择" class="w-80" :disabled="formData.topParentType==='default'" @change="topParentNameSelect">
          <el-option v-for="item in parentCellNameOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="formData.topParentRowNumber" placeholder="请选择" class="w-80" :disabled="formData.topParentType==='default' || formData.topParentCellName === 'root'" @change="topParentNameSelect">
          <el-option v-for="item in parentRowNameOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form label-position="top">
      <el-form-item label="URL(支持表达式,表达式定义在${...}中)：" class="url-border">
        <el-input v-model="formData.linkUrl" type="text" @change="dataChange"></el-input>
        <div class="margin-top-5">
          <span>目标窗口：</span>
          <el-select v-model="formData.linkTargetWindow" placeholder="请选择" class="w-150" @change="dataChange">
            <el-option v-for="item in propertyHelper.linkTargetWindowList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-button type="primary">URL参数设置</el-button>
        </div>
      </el-form-item>
      <el-row :gutter="3">
        <el-col :span="5">
        </el-col>
        <el-col :span="19">
        </el-col>
      </el-row>
    </el-form>
    <el-form label-width="100px">
      <el-form-item label="单元格类型：">
        <el-select v-model="formData.cellType" :disabled="!designer.cellDef" placeholder="请选择" class="w-100pc" @change="cellTypeChange">
          <el-option v-for="item in propertyHelper.cellTypeList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <form-list :designer="designer" :form-data="formData" :datasets="datasets" :fields="fields" :data-change="dataChange">
    </form-list>
    <el-tabs v-if="formData.cellType==='dataset'" v-model="formData.dataset.tab">
      <el-tab-pane label="数据集配置" name="config">
        <dataset-tab v-if="formData.cellType==='dataset'" :designer="designer" :form-data="formData" :datasets="datasets" :fields="fields" :data-change="dataChange"></dataset-tab>
      </el-tab-pane>
      <el-tab-pane label="过滤条件" name="filter">
        <filter-condition-tab :designer="designer" :fields="fields"></filter-condition-tab>
      </el-tab-pane>
      <el-tab-pane label="数据映射" name="mapper">
        <mapping-tab :designer="designer"></mapping-tab>
      </el-tab-pane>
    </el-tabs>
    <template v-if="formData.cellType==='chart'">
      <chart-config :designer="designer" :chart="formData.chart"></chart-config>
    </template>

    <!--条件设置对话框-->
    <condition-dialog ref="conditionDialog" :visible.sync="showConditionDialog" :designer="designer" :fields="fields">
    </condition-dialog>
  </div>
</template>

<script>
import chartConfig from "../datasetConfig/chart/chartConfig.vue";
import datasetTab from "../datasetConfig/datasetTab.vue";
import filterConditionTab from "../datasetConfig/filterConditionTab.vue";
import mappingTab from "../datasetConfig/mappingTab.vue";
import formList from "../datasetConfig/formList.vue";
import conditionDialog from "./conditionDialog";
import propertyConfigMinix from "./propertyConfigMinix.vue";

export default {
  components: {
    chartConfig,
    conditionDialog,
    datasetTab,
    filterConditionTab,
    mappingTab,
    formList
  },
  mixins: [propertyConfigMinix],
  props: {
    designer: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data () {
    return {
      // 显示条件对话框
      showConditionDialog: false
    };
  },
  computed: {
    parentCellNameOptions: function () {
      const { context } = this.designer;
      if (!context) return [];

      const hot = context.hot;
      const countCols = hot.countCols();
      const options = [{ value: "root", label: "无" }];

      for (let j = 0; j < countCols; j++) {
        const name = context.getCellName(null, j);
        options.push({
          value: name,
          label: name
        });
      }

      return options;
    },
    parentRowNameOptions: function () {
      const { context } = this.designer;
      if (!context) return [];

      const hot = context.hot;
      const countRows = hot.countRows();
      const options = [{ value: null, label: null }];

      for (let j = 1; j <= countRows; j++) {
        options.push({
          value: j,
          label: j
        });
      }

      return options;
    },
    datasets: function () {
      const { context } = this.designer;
      if (!context) return [];

      const datasources = context.reportDef.datasources;
      const sets = [];
      for (const ds of datasources) {
        const datasets = ds.datasets || [];
        for (const dataset of datasets) {
          sets.push(dataset.name);
        }
      }
      this.getFields(); // 获取字段集合

      return sets;
    }
  },
  watch: {
    "designer.cellDef": {
      handler: function () {
        this.dataInit();
      },
      deep: true
    }
  },
  methods: {
    // 左父格选中
    leftParentNameSelect () {
      const { leftParentCellName, leftParentRowNumber } = this.formData;
      if (leftParentCellName === "root") {
        this.setParentCell("root", true);
      } else {
        if (leftParentCellName && leftParentRowNumber) {
          this.setParentCell(leftParentCellName + leftParentRowNumber, true);
        }
      }
    },
    // 上父格选中
    topParentNameSelect () {
      const { topParentCellName, topParentRowNumber } = this.formData;
      if (topParentCellName === "root") {
        this.setParentCell("root", false);
      } else {
        if (topParentCellName && topParentRowNumber) {
          this.setParentCell(topParentCellName + topParentRowNumber, false);
        }
      }
    },
    // 设置父格数据
    setParentCell (cellName, isLeft) {
      const { context, rowIndex, colIndex, row2Index, col2Index } = this.designer;
      for (let i = rowIndex; i <= row2Index; i++) {
        for (let j = colIndex; j <= col2Index; j++) {
          const cellDef = context.getCell(i, j);
          if (!cellDef) {
            continue;
          }
          if (isLeft) {
            if (cellName) {
              cellDef.leftParentCellName = cellName;
            } else {
              cellDef.leftParentCellName = null;
            }
          } else {
            if (cellName) {
              cellDef.topParentCellName = cellName;
            } else {
              cellDef.topParentCellName = null;
            }
          }
        }
      }
      context.isModify = true;
    },
    // 解析父格数据
    parseCellName (cellName) {
      let pos = -1;
      for (let i = 0; i < cellName.length; i++) {
        const char = cellName.charAt(i);
        const num = parseInt(char);
        if (!isNaN(num)) {
          pos = i;
          break;
        }
      }
      const name = cellName.substring(0, pos);
      const num = cellName.substring(pos, cellName.length);
      return { name, num };
    },
    // 图片来源改变
    imageSourceChange () {
      if (this.formData.image.source === "text") {
        this.formData.image.expand = null;
        this.formData.image.value = null;
      } else {
        this.formData.image.expand = "None";
        this.formData.image.value = null;
      }
      this.dataChange();
    }
  }
};
</script>

<style lang="scss" scoped>
.widget-config-container {
  padding-bottom: 20px;
  .el-form-item {
    margin-bottom: 5px;
  }
  ::v-deep .el-form-item__label {
    padding: 0;
  }
  ::v-deep .el-form--label-top .el-form-item__label {
    padding: 0 0 2px;
    line-height: 1.5;
  }
  ::v-deep .el-radio {
    margin-right: 10px;
  }
  .url-border {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px 5px 10px;
  }
  ::v-deep .el-input__suffix {
    top: -5px;
  }
  .slash-box {
    ::v-deep .el-form-item__label {
      padding: 0 10px 0 0;
    }
    .slash-item {
      margin: 0 5px;
    }
    ::v-deep .el-input__inner {
      padding: 0 5px;
    }
  }
}
</style>
